<template>
  <div id="">
    <div class="search">
      <div class="input">
        <p><label>活动名称：</label><el-input v-model="searchData.activityName" placeholder="请输入内容"/></p>
        <p><label>活动类型：</label>
          <el-select v-model="searchData.activityType" placeholder="请选择">
            <el-option value="">请选择</el-option>
            <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </p>
        <p><label>是否上架：</label>
          <el-select v-model="searchData.isAutoOnline" placeholder="请选择">
            <el-option value="">请选择</el-option>
            <el-option
              v-for="item in Online"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </p>
        <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
      </div>
    </div>
    <div class="add">
      <el-button type="primary" @click="add">新增活动</el-button>
    </div>
    <tableVue v-loading="pageData.loading" :list="list" :state="false" :total="total" @sizeChange="handSize">
      <slot>
        <el-table-column label="操作" align="center" width='280px'>
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">添加商品
            </el-button>
            <el-button
              size="mini"
              @click="compile(scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              class="del"
              @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </slot>
    </tableVue>
    <dialogVue :dialog="dialog" :state="false" title="操作" @close="changeData">
      <slot>
        <el-form ref="ruleForm" :model="pageData" label-width="200px" class="demo-ruleForm">
          <el-form-item label="活动名称">
            <el-input v-model="pageData.activityName" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="活动类型">
            <el-select v-model="pageData.activityType" placeholder="请选择">
              <el-option value="">请选择</el-option>
              <el-option
                v-for="item in activitytype"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="活动开始时间">
            <el-date-picker
              :time-arrow-control="true"
              v-model="pageData.activityStartTime"
              value-format="timestamp"
              type="datetime"
              placeholder="选择日期时间"/>
          </el-form-item>
          <el-form-item label="活动结束时间">
            <el-date-picker
              v-model="pageData.activityEndTime"
              value-format="timestamp"
              type="datetime"
              placeholder="选择日期时间"/>
          </el-form-item>
          <el-form-item label="活动状态">
            <el-select v-model="pageData.activityStatus" placeholder="请选择">
              <el-option value="">请选择</el-option>
              <el-option
                v-for="item in activitystatus"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="推广链接">
            <el-input v-model="pageData.activityUrl" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="活动备注">
            <el-input v-model="pageData.activityRemark" placeholder="请输入内容"/>
          </el-form-item>
          <el-form-item label="参加方式">
            <el-select v-model="pageData.activityJoinType" placeholder="请选择">
              <el-option value="">请选择</el-option>
              <el-option
                v-for="item in joinType"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="是否自动上架">
            <el-select v-model="pageData.isAutoOnline" placeholder="请选择">
              <el-option value="">请选择</el-option>
              <el-option
                v-for="item in isAutoonline"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item class="confirm">
            <el-button v-if="btnState == '1'" type="primary" @click="upForm('post')">提交</el-button>
            <el-button v-if="btnState == '2'" type="primary" @click="upForm('put')">更新</el-button>
          </el-form-item>
        </el-form>
      </slot>
    </dialogVue>
  </div>
</template>
<script>
import Data from './index.js'
import dialogVue from '@/components/dialog.vue'
import tableVue from '@/components/alltable.vue'
import {
  activityList,
  addActivity,
  activityDetails,
  delActivity
} from '@/api/activity/activity'
export default {
  components: {
    tableVue,
    dialogVue
  },
  data() {
    return JSON.parse(JSON.stringify(Data))
  },
  mounted() {
    this.getactivityList()
  },
  methods: {
    getactivityList(data) {
      this.pageData.loading = true
      activityList(data).then(res => {
        if (res.data.code == 'OK') {
          this.pageData.loading = false
          this.total = res.data.data.total
          this.list.tbody = res.data.data.records.map(item => {
            item.gmtCreate = this.switchTime(item.gmtCreate)
            item.gmtUpdate = this.switchTime(item.gmtUpdate)
            item.activityType = item.activityType == '1' ? '限时抢购' : '其他'
            item.isAutoOnline = item.isAutoOnline == 'N' ? '否' : '是'
            switch (item.activityStatus) {
              case '1':item.activityStatus = '未开始'
                break
              case '2':item.activityStatus = '活动中'
                break
              case '3':item.activityStatus = '已作废'
                break
              default:
            }
            return item
          })
          this.total = res.data.data.total
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    upForm(method) {
      var data = {
        activityId: this.pageData.activityId,
        activityName: this.pageData.activityName,
        activityType: this.pageData.activityType,
        activityStartTime: this.pageData.activityStartTime,
        activityEndTime: this.pageData.activityEndTime,
        activityStatus: this.pageData.activityStatus,
        activityUrl: this.pageData.activityUrl,
        activityRemark: this.pageData.activityRemark,
        activityJoinType: this.pageData.activityJoinType,
        isAutoOnline: this.pageData.isAutoOnline
      }
      addActivity(data, method).then(res => {
        if (res.data.code == 'OK') {
          if (method == 'post') {
            this.$message.success('新增成功')
          } else {
            this.$message.success(res.data.message)
          }
          this.getactivityList()
          this.dialog = false
        }
      })
    },
    changeData(data) {
      this.dialog = data
    },
    handleEdit(id) {
      this.$router.push({
        name: 'activityGoods',
        query: {
          id: id.activityId,
          name: id.activityName
        }
      })
    },
    add() {
      this.dialog = true
      this.btnState = '1'
    },
    handSize() {},
    search() {
      activityList(this.searchData).then(res => {
        if (res.data.code == 'OK') {
          this.list.tbody = res.data.data.records.map(item => {
            item.gmtCreate = this.switchTime(item.gmtCreate)
            item.gmtUpdate = this.switchTime(item.gmtUpdate)
            item.activityType = item.activityType == '1' ? '限时抢购' : '其他'
            item.isAutoOnline = item.isAutoOnline == 'N' ? '否' : '是'
            switch (item.activityStatus) {
              case '1':item.activityStatus = '未开始'
                break
              case '2':item.activityStatus = '活动中'
                break
              case '3':item.activityStatus = '已作废'
                break
              default:
            }
            return item
          })
        }
      })
    },
    del(idx) {
      this.delMessage(() => {
        const arr = []
        arr.push(idx.activityId)
        delActivity(arr).then(res => {
          if (res.data.message == '成功') {
            this.$message.success('删除成功')
            this.getactivityList()
          }
        })
      })
    },
    compile(val) {
      activityDetails(val.activityId).then(res => {
        if (res.data.code == 'OK') {
          var item = res.data.data
          this.dialog = true
          this.btnState = '2'
          this.pageData.activityId = item.activityId
          this.pageData.activityName = item.activityName
          this.pageData.activityType = item.activityType
          this.pageData.activityStartTime = item.activityStartTime
          this.pageData.activityEndTime = item.activityEndTime
          this.pageData.activityStatus = item.activityStatus
          this.pageData.activityUrl = item.activityUrl
          this.pageData.activityRemark = item.activityRemark
          this.pageData.activityJoinType = item.activityJoinType
          this.pageData.isAutoOnline = item.isAutoOnline
        }
      })
    }
  }
}
</script>
<style  scoped>
  @import "../../../styles/common.css";
</style>
